<template>
  <el-card class="query-card">
    <template #header>
      <div class="card-header">
        <h3>知识查询</h3>
      </div>
    </template>

    <el-form>
      <el-form-item>
        <el-input
          v-model="question"
          type="textarea"
          :rows="4"
          placeholder="输入查询问题..."
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="queryKnowledge" :loading="querying">
          查询
        </el-button>
      </el-form-item>

      <el-divider v-if="response">查询结果</el-divider>

      <div v-if="response" class="response-container">
        <el-descriptions border>
          <el-descriptions-item label="回答" :span="3">
            {{ response.response }}
          </el-descriptions-item>
        </el-descriptions>

        <h4>相关实体</h4>
        <el-table :data="response.entities" stripe style="width: 100%">
          <el-table-column prop="type" label="类型" />
          <el-table-column prop="properties" label="属性">
            <template #default="scope">
              <pre>{{ JSON.stringify(scope.row.properties, null, 2) }}</pre>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const question = ref('')
const response = ref(null)
const querying = ref(false)

const queryKnowledge = async () => {
  if (!question.value) {
    ElMessage.warning('请输入查询问题')
    return
  }

  querying.value = true
  try {
    const { data } = await axios.post('http://localhost:8000/query', {
      question: question.value
    })
    response.value = data
  } catch (error) {
    ElMessage.error('查询失败：' + error.message)
  } finally {
    querying.value = false
  }
}
</script>

<style scoped>
.query-card {
  margin-bottom: 20px;
}
.response-container {
  margin-top: 20px;
}
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 